{extend name="common/common" /}

{block name="style"}
<style media="screen">
.showfalse{
	display: none;
}
</style>
{/block}

{block name="content"}
<el-card class="box-card">
	<div slot="header">
		<span class="span-primary"><i class="fa fa-user"></i></span>
		职员列表
		{if authCheck('user/useradd') }
		<a href="{:url('user/userAdd')}">
			<el-button class="header-btn" type="primary" size="small"
				icon="el-icon-plus" plain> 添加职员</el-button>
		</a>
		{/if}
	</div>
	<el-form :inline="true" class="search-table-form">
		<el-form-item>
			<el-input
				placeholder="请输入搜索内容"
				clearable="true"
				prefix-icon="el-icon-search"
				v-model="searchText">
			</el-input>
		</el-form-item>
		<el-form-item>
			<el-button type="info" plain @click="getTable">查询</el-button>
		</el-form-item>
	</el-form>
	<el-table :data="tableData" stripe="true" border>
		<el-table-column align="center" fixed prop="id" width="70"
			label="职员ID">
		</el-table-column>
		<el-table-column align="center" fixed prop="real_name" width="150"
			label="真实姓名">
		</el-table-column>
		<el-table-column align="center" prop="user_name" width="150"
			label="职员名称">
		</el-table-column>
		<el-table-column align="center" prop="role_name" width="150"
			label="职员角色">
		</el-table-column>
		<el-table-column align="center" prop="login_times" width="100"
			label="登录次数">
		</el-table-column>
		<el-table-column align="center" prop="last_login_ip" width="120"
			label="上次登录ip">
		</el-table-column>
		<el-table-column align="center"  prop="last_login_time" label="上次登录时间">
		</el-table-column>
		<el-table-column align="center" prop="register_status" label="注册状态">
			<template slot-scope="scope">
				<el-tag :type="getTagType(scope.row)">{{scope.row.register_status_name}}</el-tag>
			</template>
		</el-table-column>
		<el-table-column align="center" prop="status" label="启用状态" width="100">
			<template slot-scope="scope">
				<el-tag :type="scope.row.status === '正常' ? 'primary' : 'danger'">
					{{scope.row.status}}
				</el-tag>
			</template>
		</el-table-column>
		<el-table-column align="center" prop="register_status" label="注册" width="120">
			<template slot-scope="scope">
				{if authCheck('users/becomecompany')}
				<el-button size="small" plain type="success"
					@click="register(scope.row.id,1)" circle
					:class="getRegBtnClassName(scope.row.register_status)">企
				</el-button>
				{/if}
				{if authCheck('users/becomegovernment')}
				<el-button size="small" plain type="primary"
					@click="register(scope.row.id,2)" circle
					:class="getRegBtnClassName(scope.row.register_status)">政
				</el-button>
				{/if}
			</template>
		</el-table-column>

		<el-table-column align="center" fixed="right" prop="operate" label="操作" width="150">
			<template slot-scope="scope">
				{if authCheck('user/useredit')}
				<el-button
					@click="editRow(scope.row)" circle
					size="small" plain type="success"
					icon="el-icon-edit">
				</el-button>
				{/if}
				{if authCheck('user/userdel')}
				<el-button
					@click="delRow(scope.row)" circle
					size="small" plain 	type="danger"
					icon="el-icon-delete">
				</el-button>
				{/if}
			</template>
		</el-table-column>
	</el-table>
	<div class="table-page">
		<el-pagination
			@size-change="pageSizeChange"
			@current-change="curPageChange"
			:current-page="pageNumber"
			:page-sizes="[10, 20, 50, 75]"
			:page-size="pageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="tableTotal">
		</el-pagination>
	</div>
</el-card>
{/block}

{block name="script"}
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data:function(){
		return {
			loading:true,
			tableData:'',
			searchText:'',
			pageSize:10,
			pageNumber:1,
			tableTotal:0
		}
	},
	mounted:function(){
		this.getTable();
	},
	methods:{
		editRow(row){
			if(row.id == 1){
				main.$notify.error({
					title: '失败',
					message: '不可编辑超级管理员账号',
				});
			}else{
				window.location.href = "./useredit?id=" + row.id;
			}
		},
		delRow(row){
			if(row.id == 1){
				main.$notify.error({
					title: '失败',
					message: '不可删除超级管理员账号',
				});
				return false;
			}
			this.$confirm('此操作将永久删除该数据,是否继续?','提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}).then((res) => {
				$.post("{:url('user/userDel')}",{"id":row.id},function(res){
					if(res.code == 1){
						main.$notify({
							title:"成功",
							type: 'success',
							message: res.msg,
							onClose:main.getTable()
						});
					}else{
						main.$error({
							title: '错误'+res.code,
							message: res.msg
						});
					}
				})
			}).catch((res) => {
				this.$notify.info({
					title:"消息",
					message: "已取消删除"
				})
			});
		},
		getTable(){
			this.loading=true;
			$.post('./index',{
				'pageSize':this.pageSize,
				'pageNumber':this.pageNumber,
				'searchText':this.searchText
			},function(res){
				main.loading=false;
				if(res.code == 1){
					main.$message({
			          message: res.msg,
			          type: 'success'
			        });
					main.tableData = res.data.rows;
					main.tableTotal = res.data.total;
				}else{
					main.$notify.error({
						title: '失败',
						message: res.msg,
					});
				}
			})
		},
		pageSizeChange(val) {
			this.pageSize = val;
			this.getTable();
		},
		curPageChange(val) {
			this.pageNumber = val;
			this.getTable();
		},
		getTagType(row) {
			if(row.register_status > 70){
				return "warning";	// 审核中
			}else if(row.register_status == 0){
				return "info";		// 未注册
			}else if(row.register_status == 1){
				return "success";	// 已注册为企业
			}else if(row.register_status >= 2 && row.register_status <= 5){
				return "primary";	// 已注册为政府账号
			}else if(row.register_status == 6){
				return "danger";	// 审核不通过
			}
		},
		getRegBtnClassName(status) {
			if(status == 0 || status == 6){
				return "showtrue";
			}else{
				return "showfalse";
			}
		},
		register(uid,type) {
			if(type == 1){ // 企业
				var url = "{:url('Users/Register')}?uid="+uid+"&type="+type;
			}else{ // 政府
				var url = "{:url('Users/Register')}?uid="+uid+"&type="+type;
			}
			window.location.href = url;
		}
	}
})
</script>
{/block}
